【前端】HTML&CSS&JS基础与实例 |
您所在的位置：网站首页 › 前端html css javascript › 【前端】HTML&CSS&JS基础与实例 |
【前端】HTML&CSS&JS基础与实例
|
文章目录
HTMLCSSJS
HTML
HTML是一种用于创建网页的标准标记语言。 学习参考：https://www.runoob.com/html/html-tutorial.html 一个最基础的HTML实例： DOCTYPE html> Frank的个人博客(frank) 我的第一个标题 我的第一个段落。效果如下：
CSS是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。 CSS有两种常用导入方式：导入式和链接式。 导入式实例： body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; }然后在HTML中加入： @import"test.css"最后效果如下：
JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。 HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为百分比进度条实例： HTML定义： DOCTYPE html> Frank的个人博客(frank) @import"test.css" 我的第一个标题 我的第一个段落。 JavaScript 百分比进度条 10% 点我CSS定义： body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; } #myProgress { width: 100%; background-color: #ddd; } #myBar { width: 10%; height: 30px; background-color: #4CAF50; text-align: center; line-height: 30px; color: white; }JS定义： function move() { var elem = document.getElementById("myBar"); var width = 10; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; } } }效果如下：
以上。 |
【本文地址】